<template>
  <div>
    <h1>欢迎光临</h1>
    <div ref="plantRef" class="plant"></div>
  </div>
</template>

<script>
export default {
  mounted(){
      let myChart = this.$echarts.init(this.$refs.plantRef)
      let options= {
          title:{
              text:'各地区使用小U统计TOP10',//主标题
              textStyle:{
                  color:'#333',
                  fontSize:30
              },
              /* 
              横向的位置  默认是auto
              left：
              1、value  left（默认）  center right
              2、百分比 left:'80%'
              3、数值  left:200
              */
              // left:200
          },
          xAxis:{
              type:'value',
              axisTick:{
                  show:true,//轴刻度
              },
              alignTicks:true,//只对'value'和'log'类型的轴有效。
              axisLabel:{
                  show:true //坐标轴刻度标签
              },
              axisLine:{
                  show:true
              },
              axisPointer:{//鼠标滑过的指示器
                  show:true
              },
              //x轴的位置 默认是在底部 “bottom” 我们可以通过 top或者是“bottom”进行设置
              // position:'top'
          },
          yAxis:{
              type:'category',
              data:['北京','上海','广州','深圳','天津']
          },
          series:[
              {
                  type:'bar',//柱状图
                 // barWidth:30,//柱状图的宽度
                  data:[300,445,600,999,69]
              }
          ]
      }
      myChart.setOption(options)
  }
};
</script>

<style scoped>
.plant{
  width: 800px;
  height: 600px;
}
</style>
